/** @jsx React.DOM */

define(function(require, exports, module) {
  
  var React = require('react');

  var config = require('components/config');
  var CookieStorage = require('cookieStorage');
  var Json = require('json2');
  var publicObj = require('lib/public');

  var Login = React.createClass({
    submitClicked: function(event) {
      var username = React.findDOMNode(this.refs.username).value.trim();
      var password = React.findDOMNode(this.refs.password).value.trim();
      var post_data = {};
      post_data['username'] = username;
      post_data['password'] = password;
      post_data['grant_type'] = config.config.grant_type;
      post_data['client_id'] = config.config.client_id;
      post_data['client_secret'] = config.config.client_secret;

      $.ajax({
        url:this.props.url,
        data:post_data,
        type:'post',
        dataType:'json',
        success:function(data){
          window.cookieStorage = new CookieStorage.CookieStorage();
          if((data.success == undefined) && data.access_token){
            data.islogin = true;
			data.username = username;
            var jsonString = JSON.stringify(data);
            cookieStorage.setItem('qeeniao_login',jsonString);
            window.location.href = "#showData";
          }else if(data.success != undefined && !data.success){
            console.log('error');
          }
        },
        error:function(xhr,status,err){
          console.error(this.props.url,status,err.toString());
        }
      });

    },
    render: function() {
      return (
        <form>
        	<div className='form-group'> 
          		<h3 style={{textAlign:'center'}}> 管理员登录 </h3>
          
          		<div className='form-group'> 
            		<label htmlFor='username'>登录账号:</label> 
            		<input className='form-control' id='username' placeholder='输入登录账号' type='text' ref='username' /> 
          		</div>
          		<div className='form-group'> 
            		<span htmlFor='password'>登录密码:</span> 
            		<input className='form-control' id='password' placeholder='输入登录密码' type='password' ref='password'/> 
          		</div>
          		<div className='form-group'> 
            		<button className='btn btn-primary btn-default' type='submit' onClick={this.submitClicked}> 登录 </button>
          		</div>
        </div>
        </form>
      );
    }
  });
  
  
  var LoginInfo = React.createClass({
      getInitialState:function(){
      	  
		  return {
		  	  username:publicObj.get_username()
		  };
      },
	  componentDidMount:function(){
	  	
	  },
	  render:function(){
      	  return (
      	  	  <span>{this.state.username}</span>
      	  );
      }
  });

  exports.getComponent = function() {
    return Login;
  };
  
  exports.doLogin = function(){
	  React.render(
	  	<LoginInfo url="/proxy/admin/query"/>,
		  document.getElementById('main-username')
	  );
  }
  
  exports.render = function() {
    React.render(
      <Login url="/proxy/oauth/token"/>,
      document.getElementById('main-content')
    );
    React.render(
	  	<span></span>,
		  document.getElementById('main-username')
    );
  };
});